<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信达数据中心运维管理自动化平台</title>
    <meta name="keywords" content="信达数据中心运维管理自动化平台">
    <meta name="description" content="信达数据中心运维管理自动化平台">
    <link rel="shortcut icon" href="../favicon.ico">
    <link href="../../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../../css/animate.css" rel="stylesheet">
    <!-- Data Tables -->
    <link href="../../css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="../../css/style.css?v=4.1.0" rel="stylesheet">
    <style type="text/css">
        .panel-body .col-sm-1 {
            width: 12.3%;
            text-align: center;
        }

        .panel-body .col-sm-2 {
            text-align: center;
        }

        .panel-body .col-sm-1 div,
        .panel-body .col-sm-2 div {
            color: #009999;
            font-size: 24px;
            font-weight: bold;

        }

        .modal-lg {
            width: 90%
        }

        strong {
            color: #009999;
        }

        .select .col-sm-1 {
            width: 10%;
        }

        .tabs-container .panel-body {
            background: #fff;
            border: 1px solid #fff;
            border-radius: 2px;
            padding: 20px;
            position: relative;
        }

        th, td { white-space: nowrap; }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>操作系统概览</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="echarts bdr" id="echarts-pie"></div>
                            </div>
                            <div class="col-sm-6">
                                <div class="col-sm-4" style="padding:110px 0 0 60px;line-height: 24px;">
                                    <div>
                                        <span>告警总数目：</span>
                                        <strong id="panel1">300</strong>
                                    </div>
                                    <div>
                                        <span>已处理告警：</span>
                                        <strong id="panel2">100</strong>
                                    </div>
                                    <div>
                                        <span>未处理告警：</span>
                                        <strong id="panel3">50</strong>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div id="echarts-pan" class="echarts" style="margin-top: 40px; "></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>监控信息详情</h5>
                    </div>
                    <div class="ibox-content fff">
                        <div class="tabs-container">
                            <div class="tab-content">
                                <div id="tab-tabale1" class="tab-pane active">
                                    <div class="panel-body">
                                        <table class="table table-striped table-bordered table-hover dataTables">
                                            <thead>
                                                <tr>
                                                    <th>序号</th>
                                                    <th>告警</th>
                                                    <th>应用系统名称</th>
                                                    <th>主机名称</th>
                                                    <th>IP地址</th>
                                                    <th>CPU利用率</th>
                                                    <th>内存利用率</th>
                                                    <th>磁盘利用率</th>
                                                    <th>文件系统利用率</th>
                                                    <th>连通性</th>
                                                    <th>责任人</th>
                                                    <th>联系方式</th>
                                                </tr>
                                            </thead>
                                            <tfoot>
                                                <tr>
                                                    <th>序号</th>
                                                    <th>告警</th>
                                                    <th>应用系统名称</th>
                                                    <th>主机名称</th>
                                                    <th>IP地址</th>
                                                    <th>CPU利用率</th>
                                                    <th>内存利用率</th>
                                                    <th>磁盘利用率</th>
                                                    <th>文件系统利用率</th>
                                                    <th>连通性</th>
                                                    <th>责任人</th>
                                                    <th>联系方式</th>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框-->
    <div class="modal inmodal fade" id="change" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">告警</h4>
                </div>
                <div class="modal-body" style="text-align: center">
                    <div id="tab-tabale2" class="tab-pane active">
                        <div class="panel-body">
                            <table class="table table-striped table-bordered table-hover dataTablesModal"
                                style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th>事件登记</th>
                                        <th>发生时间</th>
                                        <th>时间描述</th>
                                        <th>主机IP</th>
                                        <th>主机名</th>
                                        <th>所属系统</th>
                                        <th>事件状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th>事件登记</th>
                                        <th>发生时间</th>
                                        <th>时间描述</th>
                                        <th>主机IP</th>
                                        <th>主机名</th>
                                        <th>所属系统</th>
                                        <th>事件状态</th>
                                        <th>操作</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 基础js -->
    <script src="../../js/jquery.min.js?v=2.1.4"></script>
    <script src="../../js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../../js/content.js?v=1.0.0"></script>
    <!-- 插件js -->
    <script src="../../js/handlebars-v3.0.1.js"></script>
    <script src="../../js/plugins/echarts/echarts.js"></script>
    <!-- Data Tables -->
    <script src="../../js/plugins/dataTables/jquery.dataTables.js"></script>
    <script src="../../js/plugins/dataTables/dataTables.bootstrap.js"></script>
    <!-- 模板 -->
    <script id="tpl" type="text/x-handlebars-template">
        {{#each func}}
        <button type="button" class="btn btn-{{this.type}} btn-sm" onclick="{{this.fn}}">{{this.name}}</button>
            {{/each}}
        </script>
    <!-- 模板 -->
    <script type="text/javascript">
        $(function () {


            // 查看告警处理率
            $("#echarts-pan").click(function () {
                $('#change').modal("show");
            });

            // Handlebars模板引擎数据
            var tpl = $("#tpl").html(); //用jquery获取模板
            var template = Handlebars.compile(tpl); //预编译模板

            // 饼状图
            var pieoption;
            var pieChart = echarts.init(document.getElementById("echarts-pie"));
            $.ajax({
                // url: 'http://192.168.0.82:8888/sysMit/area',
                url: 'json/ctrl_os/pie.json',
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    echartsPie(response.legendData, response.seriesData);
                    pieChart.setOption(pieoption);
                    $(window).resize(pieChart.resize);
                }
            });
            function echartsPie(pieName, pieData) {
                pieoption = {
                    title: {
                        text: '操作系统分布比例',
                        textStyle: {
                            fontSize: 14,
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b} : {c}台 ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 0,
                        top: '20%',
                        data: pieName
                    },
                    series: [{
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: pieData,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                };
            };

            // 仪表盘
            var panelOption;
            var pan = echarts.init(document.getElementById('echarts-pan'));
            $.ajax({
                // url: 'http://192.168.0.82:8888/sysMit/solved',
                url: 'json/ctrl_os/panel.json',
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    $("#panel1").html(response.tota);
                    $("#panel2").html(response.used);
                    $("#panel3").html(response.titleText);
                    echartsPanel(response.seriesDATA);
                    pan.setOption(panelOption);
                    $(window).resize(pan.resize);
                }
            });
            function echartsPanel(panData) {
                panelOption = {
                    series: [{
                        startAngle: 190, //开始角度 左侧角度
                        endAngle: -10, //结束角度 右
                        type: 'gauge', // 系列类型，仪表盘类型
                        title: { // 仪表盘标题。
                            offsetCenter: [0, "70%"], //相对于仪表盘中心的偏移位置
                            color: "#000", // 文字的颜色,默认 #333。
                            fontSize: 16, // 文字的字体大小,默认 15。
                        },
                        axisTick: {
                            splitNumber: 2, // 分隔线之间分割的刻度数,默认 5
                            length: 5, // 刻度线长。支持相对半径的百分比,默认 8。
                        },
                        splitNumber: 10, // 仪表盘刻度的分割段数,默认 10
                        detail: { // 仪表盘详情，用于显示数据
                            formatter: '{value}%', // 格式化函数或者字符串
                            offsetCenter: [0, "30%"], // 相对于仪表盘中心的偏移位置
                            fontSize: 18, // 文字的字体大小
                            color: "#000000" // 文字的颜色,
                        },
                        radius: "100%", //仪表大小
                        axisLine: { // 仪表盘轴线(轮廓线)相关配置
                            lineStyle: { // 仪表盘轴线样式
                                width: 12 // 仪表盘轴线宽度
                            }
                        },
                        axisLabel: { // 刻度标签。
                            distance: 1, // 标签与刻度线的距离,默认 5。
                            fontSize: 10, // 刻度的文字字体大小,默认 5。
                        },
                        splitLine: { // 分隔线样式。
                            length: 20, // 分隔线线长，默认30
                        },
                        pointer: { // 仪表盘指针。
                            length: "80%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
                            width: 5, // 指针宽度,默认 8。
                        },
                        data: panData
                    }]
                };
            };

            // 表格
            $('.dataTables').DataTable({
                " dom": "lfrtip",
                // "ajax": 'http://192.168.0.82:8888/sysMit/list',
                "ajax": 'json/ctrl_os/table.json',
                "columns": [
                    { "data": "warnId" },
                    { "data": "rank" },
                    { "data": "operationSysName" },
                    { "data": "hostName" },
                    { "data": "hostIp" },
                    { "data": "cpuPer" },
                    { "data": "memoryPer" },
                    { "data": "diskPer" },
                    { "data": "fileSysPer" },
                    { "data": "connection" },
                    { "data": "person" },
                    { "data": "telephone" }
                ]
            });
            $(".dataTables").wrapAll("<div style='overflow-x:auto'>");



            // 弹出表格
            $('.dataTablesModal').DataTable({
                " dom": "lfrtip",
                // "ajax": 'http://192.168.0.82:8888/sysMit/warn',
                "ajax": 'json/ctrl_os/panel弹窗.json',
                "columns": [
                { "data": "rank" },
                    { "data": "occurTime" },
                    { "data": "particulars" },
                    { "data": "ip" },
                    { "data": "hostName" },
                    { "data": "operationSystermName" },
                    { "data": "state" },
                    { "data": "id" },
                ],
                columnDefs: [{
                    targets: 7, //point to four column
                    render: function (a, b, c, d) { //render that get data from source
                        var context = {
                            func: [
                                { "name": "删除", "fn": "del(\'" + c.id9 + "\')", "type": "danger" }
                            ]
                        };
                        var html = template(context); //匹配内容
                        return html;
                    }
                }

                ]
            });


            setTimeout(function () {
                $(".dataTables_wrapper .row .col-sm-3").addClass('col-sm-6').removeClass('col-sm-3')
            }, 50);




        })
    </script>
</body>

</html>